<html>
<head>
    <title>Chromosome Range Control Test Page</title>
    <link rel="stylesheet" type="text/css" href="https://informatics-apps.systemsbiology.net/ext-js-3.3.1/resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="https://informatics-apps.systemsbiology.net/ext-js-3.3.1/examples/shared/examples.css"/>
    <script type="text/javascript" src="https://informatics-apps.systemsbiology.net/ext-js-3.3.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="https://informatics-apps.systemsbiology.net/ext-js-3.3.1/ext-all.js"></script>
    <script type="text/javascript" src="js/chromosomeRangeControl.js"></script>

    <script type="text/javascript">
        var rangeControl;

        function loadRangeControl() {
            rangeControl = new ChromosomeRangeControl("container_main", "/refgenome/hg18");
            rangeControl.addSelectionListener({
                onRangeSelection: function(chromRangeUri) {
                    Ext.getDom("container_msgs").innerHTML = "onRangeSelection(" + chromRangeUri + ")";
                },
                onGeneSelection: function(geneSymbol) {
                    Ext.getDom("container_msgs").innerHTML = "onGeneSelection(" + geneSymbol + ")";
                }
            });
        }

        Event.observe(window, "load", loadRangeControl);
    </script>
</head>
<body>
<div id="container_main"></div>
<div id="container_msgs"></div>
</body>
</html>